<template>
  <div class="oswrap">
    <span class="spanOs">{{this.steps.order_status}}</span>
    <div class="from">
      <div class="bar-wrp" v-if="this.steps.order_statusNo === 1 || this.steps.order_statusNo === 8">
        <div class="bgactive">下单<span>{{this.steps.creatTime}}</span></div>
        <div>付款<span></span></div>
        <div>确认<span></span></div>
        <div>制码<span></span></div>
        <div>邮寄<span></span></div>
      </div>
      <div class="bar-wrp" v-else-if="this.steps.order_statusNo === 9">
        <div class="bgactive brright">下单<span>{{this.steps.creatTime}}</span></div>
        <div class="bgactive brleft">付款<span>{{this.steps.payTime}}</span></div>
        <div>确认<span></span></div>
        <div>制码<span></span></div>
        <div>邮寄<span></span></div>
      </div>
      <div class="bar-wrp" v-else-if="this.steps.order_statusNo === 2">
        <div class="bgactive brright">下单<span>{{this.steps.creatTime}}</span></div>
        <div class="bgactive br0">付款<span>{{this.steps.payTime}}</span></div>
        <div class="bgactive brleft">确认<span>{{this.steps.productTime}}</span></div>
        <div>制码<span></span></div>
        <div>邮寄<span>{{this.steps.expTime}}</span></div>
      </div>
      <div class="bar-wrp" v-else-if="this.steps.order_statusNo === 3 || this.steps.order_statusNo === 6">
        <div class="bgactive brright">下单<span>{{this.steps.creatTime}}</span></div>
        <div class="bgactive br0">付款<span>{{this.steps.payTime}}</span></div>
        <div class="bgactive br0">确认<span>{{this.steps.productTime}}</span></div>
        <div class="bgactive brleft">制码<span v-if="this.steps.order_statusNo === 6">{{this.steps.printtime}}</span></div>
        <div>邮寄<span>{{this.steps.expTime}}</span></div>
      </div>

      <div class="bar-wrp" v-else-if="this.steps.order_statusNo === 7">
        <div class="bgactive brright">下单<span>{{this.steps.creatTime}}</span></div>
        <div class="bgactive br0">付款<span>{{this.steps.payTime}}</span></div>
        <div class="bgactive br0">确认<span>{{this.steps.productTime}}</span></div>
        <div class="bgactive br0">制码<span>{{this.steps.printtime}}</span></div>
        <div class="bgactive brleft">邮寄<span>{{this.steps.expTime}}</span></div>
      </div>
      <div class="bar-wrp" v-else>
        <div>下单</div>
        <div>付款</div>
        <div>制码</div>
        <div>印刷</div>
        <div>邮寄</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderSteps',
  props: ['steps']
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.from{
  display: flex;
  align-items: center;
  position: relative;
}
.spanOs{
  font-size: 20px;
  padding-bottom: 15px;
  padding-right: 10px;
  display: bolock;
}
.bar-wrp{
  display:flex;
  position:relative;
  justify-content: space-around;
  background-color: #e4e4e4;;
  width: 90%;
  height: 20px;
  border-radius: 20px;
  margin: 0 30px 0 0;
  align-items: center;
}
.bar-wrp>div{
  position: relative;
  text-align: center;
  line-height: 20px;
  width: 20%;
}
.bar-wrp div:first-child {
  border-radius: 20px 0 0 20px;
}
.bar-wrp>div>span{
  position: absolute;
  top:26px;
  color: #333;
  font-size: 14px;
  left:35px;
}
.bar-wrp>div.bgactive{
  height: 100%;
  border-radius: 20px;
  color: white;
  background-color: $baseColor;
}
.bar-wrp>div.brright {
  border-radius: 20px 0 0 20px;
}
.bar-wrp>div.brleft {
  border-radius: 0 20px 20px 0;
}
.bar-wrp>div.br0 {
    border-radius: 0;
}
</style>
